<template>
    <view class="cus-page">
        <!-- 分段器 -->
        <ct-subsection :subsections="subsections" :current="current" @change="subsection"/>

        
        <view v-if="current == 0" class="type-area">
            <view class="com-m-t-20" v-for="(item,index) in mailList" :key="index">
                <ct-business-list :cardData="item" @clickButton="clickButton" />
            </view>
        </view>


        <view v-if="current == 1" class="com-m-t-20 com-m-b-20 type-area com-flex com-row-between">
            <view v-for="(item,index) in collageTab" :key="index" class="com-flex">
                <u-button :text="item" @tap="collageTabCurrent=index"
                    :customStyle="{
                        height:'52rpx',
                        margin: index == collageTab.length-1 ? '0 40rpx 0 0' : 0,
                        fontSize:'26rpx',
                        border: index == collageTabCurrent ? '1px solid #02BDF3' : '1px solid #fff', 
                        color: index == collageTabCurrent ? '#02BDF3' : '#666'
                    }">
                </u-button>
            </view>
            <view class="com-flex">
                <u-icon name="plus-circle" color="#FF558F"></u-icon>
                <text class="com-m-l-12 com-price-color">申请开团</text>
            </view>
        </view>
        <view v-if="current == 1" class="type-area">
            <view v-for="(tem,ind) in collageList" :key="ind" class="com-m-t-20 collage-item">
                <view class="com-flex com-row-between">
                    <text class="com-font-32 com-font-bold">{{tem.status == 1 ? "拼团中" : "待结算" }}</text>
                    <text class="com-active-color">收货地:中国</text>
                </view>
                <view class="com-m-t-32 com-flex" style="align-items:flex-start">
                    <view v-for="(item,index) in 5" :key="index">
                        <u-button v-if="index < tem.list.length"
                            class="com-flex-col com-row-center com-col-center item"
                            :customStyle="{border:'none'}">
                            <image :class="['head',index == 0 ? 'border' : null]" src="/static/temporary/img3.jpg"></image>
                            <view v-if="index == 0" class="text">团长</view>
                        </u-button>
                        <u-button v-else 
                            class="com-flex-col com-row-center com-col-center item blank-item"
                            :customStyle="{border:'2rpx dashed #DADADA'}"
                            icon="plus" iconColor="#CDCDCD" color="#f6f6f6">
                        </u-button>
                    </view>
                </view>
                <view class="com-m-t-24 com-flex com-row-right">
                    <u-button v-if="tem.status == 1" shape="circle" text="申请入团" 
                        :customStyle="{width:'160rpx',height:'60rpx',color:'#666',margin:0,border:'1px solid #02BDF3'}">
                    </u-button>
                    <u-button v-if="tem.status == 2" shape="circle" text="查看商品" 
                        :customStyle="{width:'160rpx',height:'60rpx',color:'#212122',margin:0,border:'1px solid #B0B0B0'}">
                    </u-button>
                </view>
            </view>
        </view>

        <!-- 间距 -->
        <u-gap height="30rpx" bgColor="transparent"></u-gap>

        <!-- 底部结算组件 -->
        <ct-button-settlement :bottomData="bottomData" />
    </view>
</template>


<script>
export default {
    name:'', // 发货
    components: {},
    props:{},

    data () {
        return {
            // 分段器
            subsections: ['直邮', '拼团发货',],
            current: 0,
            // 直邮
            mailList: [
                { 
                    checked: [],
                    logo: '/static/logo.ico',
                    name: 'rakuma卖家：泡泡玛特',
                    status: 0, 
                    list: [
                        { 
                            imgUrl: '/static/temporary/img2.jpg',
                            title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹测试测试',
                            tag: '新品',
                            price: 1660,
                            num: 1
                        }
                    ]
                },
                {
                    checked: [],
                    logo: '/static/logo.ico',
                    name: 'rakuma卖家：泡泡玛特',
                    status: 0,
                    list: [
                        { 
                            imgUrl: '/static/temporary/img2.jpg',
                            title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹测试测试',
                            tag: '新品',
                            price: 160,
                            num: 1
                        }
                    ]
                },
                { 
                    checked: [],
                    logo: '/static/logo.ico',
                    name: 'rakuma卖家：泡泡玛特',
                    status: 0, 
                    list: [
                        { 
                            imgUrl: '/static/temporary/img2.jpg',
                            title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹测试测试',
                            tag: '新品',
                            price: 1660,
                            num: 1
                        }
                    ]
                },
                {
                    checked: [],
                    logo: '/static/logo.ico',
                    name: 'rakuma卖家：泡泡玛特',
                    status: 0,
                    list: [
                        { 
                            imgUrl: '/static/temporary/img2.jpg',
                            title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹测试测试',
                            tag: '新品',
                            price: 160,
                            num: 1
                        }
                    ]
                },
                { 
                    checked: [],
                    logo: '/static/logo.ico',
                    name: 'rakuma卖家：泡泡玛特',
                    status: 0, 
                    list: [
                        { 
                            imgUrl: '/static/temporary/img2.jpg',
                            title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹测试测试',
                            tag: '新品',
                            price: 1660,
                            num: 1
                        }
                    ]
                },
                {
                    checked: [],
                    logo: '/static/logo.ico',
                    name: 'rakuma卖家：泡泡玛特',
                    status: 0,
                    list: [
                        { 
                            imgUrl: '/static/temporary/img2.jpg',
                            title: '宝可梦集换式卡牌游戏PTCGA 简中日月第一弹测试测试',
                            tag: '新品',
                            price: 160,
                            num: 1
                        }
                    ]
                },
            ],
            // 我的拼团
            collageTab: ["全部","我的拼团","待结算"],
            collageTabCurrent: 0,
            collageList: [
                {
                    status: 1, // 我的拼团
                    list: [
                        { head: '/static/temporary/img3.jpg' },
                        { head: '/static/temporary/img3.jpg' },
                        { head: '/static/temporary/img3.jpg' },
                    ]
                },
                {
                    status: 2, // 待结算
                    list: [
                        { head: '/static/temporary/img3.jpg' },
                        { head: '/static/temporary/img3.jpg' },
                        { head: '/static/temporary/img3.jpg' },
                        { head: '/static/temporary/img3.jpg' },
                        { head: '/static/temporary/img3.jpg' },
                    ]
                }
            ],
            // 底部
            bottomData: {
                checked: [],
                price: 1660,
                rmb: 53,
                button: {
                    text: "结算",
                    width: 190
                }
            }
        }
    },

    computed: {},
    watch: {},

    mounted() {},

    methods: {
        // 切换tab
        subsection(e){
            this.current = e.current;
        },
    },
}
</script>


<style scoped lang='scss'>
    /* 拼团ITEM */
    .collage-item{
        background:#FFF;
        border-radius: 24rpx;
        padding: 32rpx;
        .item{
            width: auto;
            height: auto;
            padding: 0;
            flex-direction: column !important;
            margin: 0 24rpx 0 0;
            .head{
                width: 90rpx;
                height: 90rpx;
                border-radius: 50%;
            }
            .border{
                border: 2px solid #02BDF3;
            }
            .text{
                width: 76rpx;
                height: 32rpx;
                margin-top: -16rpx;
                background: linear-gradient(-90deg, #C3B0FF 0%, #39E3FD 100%);
                border-radius: 16rpx;
                text-align: center;
                line-height: 34rpx;
                font-size: 22rpx;
                color: #fff;
                position: relative;
                z-index: 10;
            }
            /deep/.u-icon__icon{
                margin-left: 6rpx;
                font-size: 36rpx !important;
            }
        }
        .blank-item{
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
        }
    }
</style>